<template>
  <div>
    <input type="text" v-model="inputValue"> {{inputValue}}
    <!-- <textarea name="" id="" cols="30" rows="10"></textarea>
    <select name="" id="">
      <option value=""></option>
    </select> -->
  </div>
  <div>
    <input type="checkbox" v-model="checkedValue"> {{checkedValue}}
  </div>
  <div>
    <input type="checkbox" value="吃饭" v-model="checkboxValue">
    <input type="checkbox" value="睡觉" v-model="checkboxValue">
    <input type="checkbox" value="打豆豆" v-model="checkboxValue">
    {{checkboxValue}}
  </div>
  <div>
    <input type="radio" value="男" v-model="radioValue">
    <input type="radio" value="女" v-model="radioValue">
    {{radioValue}}
  </div>
  <div>
    <textarea v-model="textareaValue" cols="30" rows="10"></textarea>
    {{textareaValue}}
  </div>
  <div>
    <select v-model="selectValue" multiple>
      <option>北京</option>
      <option>上海</option>
      <option>深圳</option>
    </select>
    {{selectValue}}
  </div>
  <div>
    <input type="text" v-model.lazy="inputValue">
    {{inputValue}}
  </div>
  <div>
    <input type="number" v-model.number="numberValue">
    {{typeof numberValue}}
  </div>
  <div>
    <input type="text" v-model.trim="trimValue">
    {{trimValue}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: 'hello',
      checkedValue: false,
      checkboxValue: ['吃饭'],
      radioValue: '',
      selectValue: ['北京', '上海'],
      numberValue: 10,
      trimValue: '',
      textareaValue: ''
    }
  }
}
</script>

<style lang='stylus' scoped>

</style>